<template>
  <a-drawer
    :visible="isShow"
    class="custom-class"
    :width="600"
    title="设置团长副团长"
    placement="right"
    destroyOnClose
    @close="emit('setCommander')"
  >
    <a-form
      ref="form"
      :model="formState"
      name="basic"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 20 }"
      autocomplete="off"
    >
      <a-form-item label="届次" name="number">
        <a-input v-model:value="formState.number" disabled />
      </a-form-item>
      <a-form-item label="工号或姓名" name="workNoOrName">
        <a-select
          v-model:value="formState.workNoOrName"
          show-search
          placeholder="请输入工号或姓名关键字"
          :options="memberList"
          :fieldNames="{ label: 'workNoOrName', value: 'id' }"
          :filter-option="filterOption"
          @select="handleChange"
        ></a-select>
      </a-form-item>
      <a-form-item label="联系方式" name="mobile">
        <a-input v-model:value="formState.mobile" disabled />
      </a-form-item>
      <a-form-item label="所属单位" name="unit">
        <a-input v-model:value="formState.unit" disabled />
      </a-form-item>
      <a-form-item label="身份" name="identity">
        <a-radio-group v-model:value="formState.identity" button-style="solid">
          <a-radio-button :value="1">团长</a-radio-button>
          <a-radio-button :value="2">副团长</a-radio-button>
        </a-radio-group>
      </a-form-item>
    </a-form>
    <a-button type="primary" style="float: right" @click="setCommanderOver"
      >确定</a-button
    >
  </a-drawer>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { getSessionUser } from "@/api/contingent";
import { FormInstance, message } from "ant-design-vue";
defineProps<{
  isShow: boolean;
}>();
const emit = defineEmits<{
  (enent: "setCommander"): void;
}>();
onMounted(() => {
  getSessionUser(1, 10).then((res: any) => {
    console.log("res", res);
    memberList.value = res.userList.map((item: any) => {
      return {
        id: item.id,
        workNoOrName: `${item.name}(${item.workNo})`,
        mobile: item.mobile,
        unit: item.unit,
      };
    });
  });
});
const formState = reactive({
  id: null,
  number: "第九届第四次",
  workNoOrName: null,
  mobile: "",
  unit: "",
  identity: 1,
});

const memberList = ref<any[]>([]);
const form = ref<FormInstance>();
const filterOption = (input: string, option: any) => {
  return option.workNoOrName.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
const handleChange = (_: string, option: any) => {
  formState.id = option.id;
  formState.mobile = option.mobile;
  formState.unit = option.unit;
};
const setCommanderOver = () => {
  console.log(formState);
  form.value?.resetFields()
  emit("setCommander");
  message.success("设置成功！");
};
</script>

<style scoped></style>
